<template>
  <div>
    <h1>App</h1>
    <input type="text" ref="msg" />
    <button @click="showMsg">展示输入框的内容</button>
    <hr />
    <Header ref="header" />
    <button @click="handler">按钮</button>
  </div>
</template>
<script>
import Header from './components/Header.vue';
export default {
  name: 'App',
  components: {
    Header,
  },
  methods: {
    showMsg() {
      /* 
        ref属性
          1.被用来给元素或者子组件注册引用信息，引用信息将会注册在父组件实例的$refs 对象上
          2.如果在普通的DOM元素上使用，引用指向的就是DOM元素（如果以后考虑获取真实DOM则可以使用ref）
          3.如果用在子组件上，引用就之乡组件实例，其实也是未来组件通信的一种方式
          4.注意事项：
            1.因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 还不存在
            2.$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定

*/
      console.log(this);
      console.log(this.$refs.msg);
      console.log(this.$refs.msg.value);
    },
    handler() {
      console.log(this.$refs.msg);
      this.$refs.header.count++;
    },
  },
};
</script>
<style></style>
